<template>
  <div class="container">
    <n-tabs v-model:tab="activeTab">
      <n-tab-pane name="all" tab="全部分类">
        <n-space vertical size="large">
          <n-space>
            <n-button @click="navigateTo('all', 0)" type="primary">最新</n-button>
            <n-button @click="navigateTo('all', 1)">最热</n-button>
          </n-space>

          <n-row gutter="12">
            <n-col :span="6" v-for="item in items" :key="item.id">
              <n-card style="border: #00bdfe 1px solid">
                <template #header>
                  <n-space>
                    <n-tag>{{ item.date }}</n-tag>
                    <n-avatar round :src="item.image" class="card-image"></n-avatar>
                  </n-space>
                </template>
                <h4>{{ item.title }}</h4>
                <p>{{ item.shortDescription }}</p>
                <n-space>
                  <n-button type="primary" :href="item.useLink">立即使用</n-button>
                  <n-button :href="item.docLink">技术文档</n-button>
                </n-space>
              </n-card>
            </n-col>
          </n-row>
        </n-space>
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script>
import { ref } from 'vue';
import { NButton, NCard, NCol, NRow, NSpace, NTag, NAvatar, NTabs, NTabPane } from 'naive-ui';

export default {
  components: {
    NButton,
    NCard,
    NCol,
    NRow,
    NSpace,
    NTag,
    NAvatar,
    NTabs,
    NTabPane
  },
  setup() {
    const activeTab = ref('all');
    const items = ref([
      {
        id: 1,
        date: '07月上线',
        image: 'https://cdn.free-api.com/a2541-851n9.webp',
        title: '获取有趣视频',
        description: '获取随机有趣视频',
        shortDescription: '获取随机有趣视频',
        useLink: '/use/644',
        docLink: '/doc/644',
        views: 3518
      },


      // Add more items here
    ]);

    const navigateTo = (type, val) => {
      window.location.href = `/?type=${type}&val=${val}`;
    };

    return {
      activeTab,
      items,
      navigateTo
    };
  }
};
</script>

<style scoped>
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 1280px) {
  .container {
    padding: 1rem;
  }
}
.card-image {
  width: 100%;
  height: 200px; /* 可以根据需要调整 */
  object-fit: cover;
}
</style>
